<template>
<div>
    <el-card>
   <div class="block">
        <el-tree
        style="margin-top: 20px"
        :data="data"
        expand-on-click-node
        node-key="id"
        ref="tree"
        :props="defaultProps">
        <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{data.usermobile}}</span>
                <el-button  type="text" size="mini" @click="() => handleCompanyForm(data)"> VIP账号信息</el-button>
        </span>
      
      </el-tree>
       <!--查看弹框start-->
        <el-dialog
            title="VIP账号信息"
            :visible.sync="detailVisible"
            :before-close="hideDetailForm"
            width="50%"
            top="5vh"
            v-dialogDrag
            :close-on-click-modal="false"
        >
        <template slot="title">
            <div class="avue-crud__dialog__header">
                <span class="el-dialog__title">
                    <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                    VIP账号信息
                </span>
            </div>
        </template>
        <el-card>
            <el-form :model="formData" label-width="140px">
                <el-form-item style="background: #e1e1e1">
                    <span style="color: #3A3A3A;margin-left: -120px">VIP用户信息</span>
                </el-form-item>
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="头像：" style="width:30%;display: inline-block">
                        <el-popover v-if="formData.userpic" placement="right" trigger="hover">
                            <img :src="formData.userpic" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="formData.userpic" style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                        </el-popover>
                        <el-popover v-else placement="right" trigger="hover">
                            <img src="../../assets/image/appimage.png" style="width:400px;border-radius:3px;">
                            <img slot="reference" src="../../assets/image/appimage.png" style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                    </el-popover>
                    </el-form-item>
                </el-form-item>
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="昵称：" style="width:30%;display: inline-block;">
                        <span v-if="formData.usernick !=null"> {{formData.usernick}}</span>
                        <span v-else>{{formData.usermobile}}</span>
                        <!-- <input v-model="formData.usernick" type="text" readonly> -->
                    </el-form-item>
                    <el-form-item label="手机号：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.usermobile" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="注册时间：" style=" width:30%;display: inline-block;">
                        <input :value="formData.userregisttime |formatDateStr('yyyy-MM-dd') "  type="text"  readonly  >
                    </el-form-item>
                </el-form-item>
            </el-form>
            </el-card>
        </el-dialog>

    </div>
    </el-card>
</div>
</template>
<script>
    import {getCompanyList}from "../../api/mbuser/mbuser.js";
    export default {
        data(){
            return{
                detailVisible:false,
                loading:false,
                data:[],
                defaultProps: {
                    children: "children",
                    label: "usernick"
                },
                formData:{},
                
                userid:"",//路由传送的id
            }
        },
        methods:{
            
        // 显示下级vip页面
            handleAuth() {
                this.data= [];
                this.loading = true;
                let query ={ userid:this.userid, };
                getCompanyList(query)
                .then(response => {
                    this.loading = false;
                    if (response.code) {
                        this.$message({ message: response.message,  type: "error"});
                        return;
                    }
                    this.data = response.data || [];
                    console.log(response)
                    
                })
                .catch(() => {this.loading = false;});
            },
            //展示弹窗信息
            handleCompanyForm(data){
                console.log(data)
                this.detailVisible=true
                this.formData = data
            },
            hideDetailForm(){
                this.detailVisible=false
                this.formData={}
            }
    
        },
        created(){
            if(this.$route.query.id){
                this.userid= this.$route.query.id
            }
            
        },
        mounted(){
           this.handleAuth()
        }

    }
</script>

<style scoped >
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
p {
    color: #333;
}
</style>
